<template>
  <div class="file-row">
    <!-- 文件信息区域 -->
    <div class="file-info">
      <!-- 文件图标（根据类型动态显示） -->
      <i :class="[getIconClass(file.mainType), 'file-icon', getIconColor(file.mainType)]"></i>

      <div class="file-details">
        <div class="file-name">{{ file.name }}</div>
        <div class="file-meta">
          <span class="file-size">{{ file.size }}</span>
          <span class="file-modified">{{ file.modified }}</span>
          <!-- 收藏标签 -->
          <span v-if="file.isStarred" class="file-tag text-yellow-500">已收藏</span>
          <!-- 共享标签 -->
          <span v-if="file.isShared" class="file-tag text-blue-500">已分享</span>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="file-actions">
      <el-button
          type="text"
          size="mini"
          icon="el-icon-download"
          @click="handleDownload"
          title="下载"></el-button>
      <el-button
          type="text"
          size="mini"
          :icon="file.isStarred ? 'el-icon-star-on' : 'el-icon-star-off'"
          :class="{'text-yellow-500': file.isStarred}"
          @click="handleToggleStar"
          title="收藏"
      ></el-button>
      <el-button
          type="text"
          size="mini"
          icon="el-icon-share"
          :class="{'text-blue-500': file.isShared}"
          @click="handleShare"
          :title="file.isShared ? '复制下载链接' : '生成分享链接'"
      ></el-button>
      <el-button
          type="text"
          size="mini"
          icon="el-icon-delete"
          @click="handleDelete"
          title="删除"></el-button>
    </div>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'FileItem',
  props: {
    // 接收父组件传入的文件信息
    file: {
      type: Object,
      required: true
      // 校验文件信息结构（放宽校验，避免严格校验导致的报错）
    }
  },
  computed: {
    // 确保文件有有效的标识（优先使用fileName）
    fileData() {
      return {
        ...this.file,
        isStarred: this.file.isStarred === true || this.file.isStarred === 'true',
        isShared: this.file.isShared === true || this.file.isShared === 'true',
        isDeleted: this.file.isDeleted === true || this.file.isDeleted === 'true'
      }
    },
    fileIdentifier() {
      return this.file.fileName || this.file.name;
    }
  },
  methods: {
    /**
     * 处理文件下载
     */
    async handleDownload() {
      try {
        // 显示加载动画
        const loading = this.$loading({
          lock: true,
          text: '正在准备下载...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // 修复：从 userData 中获取邮箱（与 store 结构一致）
        const email = this.$store.state.userData?.email;
        if (!email) {
          throw new Error('未获取到用户信息');
        }

        // 调用下载接口（二进制流格式）
        const response = await service({
          url: `/files/download/${email}/${this.file.name}`,
          method: 'get',
          responseType: 'blob', // 关键：指定响应为二进制流
        });

        loading.close(); // 关闭加载动画

        // 处理二进制流，触发浏览器下载
        if (response.data instanceof Blob) {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const a = document.createElement('a');
          a.href = url;
          a.download = this.file.name; // 指定下载文件名
          document.body.appendChild(a);
          a.click(); // 触发下载

          // 清理资源
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
          this.$message.success('文件下载成功');
        } else {
          // 处理后端返回的JSON错误信息
          const reader = new FileReader();
          reader.onload = () => {
            try {
              const error = JSON.parse(reader.result);
              this.$message.error(error.msg || '下载失败');
            } catch (e) {
              this.$message.error('下载失败：无效的错误信息');
            }
          };
          reader.readAsText(response.data);
        }
      } catch (error) {
        this.$loading().close(); // 确保加载动画关闭
        this.$message.error('下载失败，请重试');
        console.error('下载错误:', error);
      }
    },

    /**
     * 根据文件主类型获取图标类名
     * @param {string} mainType - 文件主类型（如document/image）
     * @returns {string} 图标类名
     */
    getIconClass(mainType) {
      const iconMap = {
        document: 'el-icon-document',
        image: 'el-icon-picture-outline',
        video: 'el-icon-video-camera',
        audio: 'el-icon-microphone',
        folder: 'el-icon-folder',
        other: 'el-icon-file'
      };
      return iconMap[mainType] || 'el-icon-file';
    },

    /**
     * 根据文件主类型获取图标颜色类名
     * @param {string} mainType - 文件主类型
     * @returns {string} 颜色类名
     */
    getIconColor(mainType) {
      const colorMap = {
        document: 'text-blue-500',
        image: 'text-green-500',
        video: 'text-red-500',
        audio: 'text-purple-500',
        folder: 'text-yellow-500',
        other: 'text-gray-500'
      };
      return colorMap[mainType] || 'text-gray-500';
    },

    /**
     * 处理文件删除（向父组件传递事件）
     */
    async handleDelete() {
      try {
        const email = this.$store.state.userData?.email;
        const fileName = this.file.name;
        if (!email || !fileName) throw new Error('用户信息缺失');
        // 确认对话框
        const confirmMsg = this.file.isDeleted
            ? `确定彻底删除 ${fileName}？此操作不可恢复`
            : `确定将 ${fileName} 移至回收站？`;
        await this.$confirm(confirmMsg, '提示', { type: 'warning' });
        const loading = this.$loading({ text: '处理中...' });

        // 根据文件状态执行不同操作
        if (this.file.isDeleted) {
          // 彻底删除文件
          //后端
          await service.post('/files/delete-permanently', { fileName, email });
          //前端测试
          //await service.get('/delete-permanently', { fileName, email });
          //后端
          //const response = await service.post('/userdata'，{email})
          //前端测试
          const response = await service.post('/userdata',{email})
          const userData = Array.isArray(response.data) ? response.data[0] : response.data
          if (userData) {
            localStorage.setItem('userData', JSON.stringify(userData))
            this.$store.commit('initUserData', userData)
          }
          // 通知父组件刷新列表（传递 fileName）
          this.$emit('delete', { fileName, permanent: true });
          this.$message.success(`文件 "${fileName}" 已彻底删除`);
        } else {
          // 移至回收站
          //后端
          await service.post('/files/move-to-trash', { fileName, email });
          //前端测试
          //await service.post('/move-to-trash', { fileName, email });
          //后端
          //const response = await service.post('/userdata'，{email})
          //前端测试
          const response = await service.post('/userdata',{email})
          const userData = Array.isArray(response.data) ? response.data[0] : response.data
          if (userData) {
            localStorage.setItem('userData', JSON.stringify(userData))
            this.$store.commit('initUserData', userData)
          }
          // 关键：直接更新本地文件状态
          this.$set(this.file, 'isDeleted', true);
          // 通知父组件刷新列表
          this.$emit('delete', { fileName, permanent: false });
          this.$message.success(`文件 "${fileName}" 已移至回收站`);
        }

        loading.close();
      } catch (error) {
        this.$loading().close();
        this.$message.error(error.message || '操作失败');
      }
    },

    /**
     * 处理文件收藏状态切换
     */
    async handleToggleStar() {
      try {
        const email = this.$store.state.userData?.email;
        const fileName = this.fileIdentifier;
        if (!email || !fileName) {
          throw new Error('缺少用户信息或文件ID');
        }
        if (!fileName) {
          throw new Error('文件信息不完整，无法操作');
        }
        const loading = this.$message({
          message: '正在更新收藏状态...',
          type: 'loading',
          duration: 0
        });
        console.log(email)
        console.log(fileName)// 后端
        const response = await service.post('/files/toggle-star', {
         fileName:fileName,
          email:email
         });
        //前端
        //const response = await service.get('/toggle-star',{
        // fileName: fileName,  // 用fileName标识文件
        // email: email  // 用email标识用户
        //});
        // 5. 关闭加载提示
        loading.close();
        // 3. 解析后端响应的最新收藏状态
        const Data = Array.isArray(response.data) ? response.data[0] : response.data
        const { isStarred } = Data;
        // 验证状态有效性
        if (typeof isStarred !== 'boolean') {
          throw new Error('后端未返回有效的收藏状态（isShared应为布尔值）');
        }
        // 直接更新本地文件状态
        this.$set(this.file, 'isStarred', isStarred);
        // 4. 通知父组件更新状态（传递fileName和最新isStarred）
        this.$emit('toggle-star', {
          fileName: fileName,
          isStarred: isStarred,
          file: this.file
        });
        // 显示成功消息
        const status = isStarred ? '收藏' : '取消收藏';
        this.$message.success(`${status}成功: ${this.file.name}`);
      } catch (error) {
        // 隐藏加载状态
        this.$loading().close();
        // 显示错误消息
        this.$message.error(error.message || '操作失败，请重试');
        console.error('收藏状态切换错误:', error);
      }
    },
    async refreshFileData() {
      try {
        const email = this.email || '';
        const response = await service.post('/userdata',{email})//后端
        //const response = await service.get('/userdata')//前端测试
        const userData = Array.isArray(response.data) ? response.data[0] : response.data
        if (userData) {
          this.$store.commit('initUserData', userData)
        }
      } catch (error) {
        console.error('刷新文件数据失败:', error);
        throw new Error('刷新数据失败'); // 触发上层错误处理
      }
    },
    /**
     * 处理文件分享
     */
    async handleShare() {
      try {
        // 修复：从 userData 中获取邮箱
        const email = this.$store.state.userData?.email;
        const fileName = this.file.name;
        if (!email || !fileName) {
          throw new Error('缺少用户信息或文件名');
        }
        if (!this.file.isShared) {
          // 未分享：生成分享链接并复制
          const response = await service.post('/share-link', {
            fileName: fileName,
            email: email
          });
          const shareUrl = response.data?.shareUrl;
          if (!shareUrl) {
            throw new Error('生成分享链接失败');
          }
          // 更新文件状态为已分享
          await this.toggleFileSharedStatus(fileName, email, true);

          // 复制分享链接到剪贴板
          await navigator.clipboard.writeText(shareUrl);

          // 通知父组件刷新列表
          this.$emit('share', { fileName, isShared: true });

          this.$message.success(`分享链接已复制: ${shareUrl}`);
        } else {
          // 已分享：复制下载链接
          const downloadUrl = `http://localhost:5080/files/download/${email}/${fileName}`;
          await navigator.clipboard.writeText(downloadUrl);
          this.$message.success(`下载链接已复制`);
        }
      } catch (error) {
        this.$message.error('分享失败，请重试');
        console.error('分享错误:', error);
      }
    },
    /**
     * 切换文件共享状态（使用fileName和email）
     */
    async toggleFileSharedStatus(fileName, email, isShared) {
      try {
        // 后端调用
        await service.post('/share', {
          fileName: fileName,
          email: email,
          isShared: isShared
        });
        // 更新本地文件列表
        const updatedFiles = this.$store.state.userData.fileList.map(file => {
          if (file.fileName === fileName) {
            return { ...file, isShared: isShared };
          }
          return file;
        });

        // 提交mutation更新状态
        this.$store.commit('updateUserData', { fileList: updatedFiles });
      } catch (error) {
        console.error('更新共享状态失败:', error);
        throw error;
      }
    }
  }
}
</script>

<style scoped>
.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.file-row:hover {
  background-color: #f5f7fa; /* hover效果 */
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1; /* 占满剩余空间 */
  min-width: 0; /* 解决内容溢出问题 */
}

.file-icon {
  font-size: 24px;
  margin-right: 12px;
  width: 24px;
  height: 24px;
}

.file-details {
  min-width: 0; /* 允许内容收缩 */
}

.file-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文件名过长时显示省略号 */
  margin-bottom: 4px;
}

.file-meta {
  display: flex;
  align-items: center;
  gap: 16px; /* 元数据之间的间距 */
  font-size: 12px;
  color: #666;
}

.file-tag {
  padding: 1px 4px;
  font-size: 10px;
  border-radius: 2px;
  color: white;
  opacity: 0.7;
}

.file-actions {
  display: flex;
  gap: 8px; /* 按钮之间的间距 */
  margin-left: 16px;
}
</style>